<template>
  <el-container>
    <el-header
      class="header"
      height="30px"
    >
      <n-header :is-back="true"></n-header>
    </el-header>
    <el-main class="main">
      <n-search-bar
        :logoSize="5"
        :searchSize="12"
        :otherSize="-1"
        justify="center"
        :searchStyle="{ height: '100px', backgroundColor: '#fff' }"
        :logoStyle="{ fontSize: '100px' }"
      >
        <template #search>
          <search-bar></search-bar>
        </template>
      </n-search-bar>
      <div class="info-bar">
        <span style="line-height: 30px">{{ data.name }}</span>
      </div>
      <n-load-html :url="data.introduce"></n-load-html>
    </el-main>
    <el-footer> </el-footer>
  </el-container>
</template>
  
  <script>
import NHeaderVue from "@/components/NHeader.vue";
import SearchBarVue from "@/components/commodity/SearchBar.vue";
import NSearchBarVue from "@/components/NSearchBar.vue";
import NLoadHtmlVue from "@/components/NLoadHtml.vue";
import { selectStoreById } from "@/api/store";

export default {
  components: {
    NHeader: NHeaderVue,
    SearchBar: SearchBarVue,
    NSearchBar: NSearchBarVue,
    NLoadHtml: NLoadHtmlVue
  },
  data() {
    return {
      data: {},
    };
  },
  methods: {
    doSelectStoreById() {
      selectStoreById(this.$route.query.id).then((res) => {
        this.data = res;
        console.log(res)
      });
    },
  },
  created() {
    this.doSelectStoreById();
  },
};
</script>
  
  <style scoped>
.header {
  background-color: #eae5e3;
}
.main {
  background-color: #fff;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

.info-bar {
  background-color: #f2f2f2;
  width: calc(100% - 200px);
  height: 30px;
  padding: 0 100px;
  color: #999999;
  display: flex;
  justify-content: end;
}
</style>